{% extends 'al120/base.html' %}
{% block content %}
    <div class="row">
        <div class="col-auto">
            <span class="badge badge-success">时间范围</span>
        </div>
    </div>
    <form>
        {% csrf_token %}
        <div class="form-row align-items-center">
            <label for="id_date_start">开始</label>
            <div class="col-auto">
                <input name="month" type="date" id="id_date_start" class="form-control">
            </div>

            <label for="id_date_end">结束</label>
            <div class="col-auto">
                <input name="month_end" type="date" id="id_date_end" class="form-control">
            </div>
            <div class="col-auto">
                <button class="btn btn-info" id="id_btn">生成</button>
            </div>
        </div>
    </form>
    <p style="margin-top: 6px">说明，鼠标可划选放大范围</p>

    <div id="container" style="min-width:400px;height:770px"></div>
{% endblock %}
{% block script %}
    <script src="/static/highcharts/code/highcharts.js"></script>
    <script>
        $(document).ready(function () {
            let chart = null;
            // csrf
            let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

            function csrfSafeMethod(method) {
                // these HTTP methods do not require CSRF protection
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });

            $('#id_btn').click(function (evt) {
                evt.preventDefault();
                console.log('clicked');
                $.post('{% url "al120:chart_data" %}',
                    {
                        's': $('#id_date_start').val(),
                        'e': $('#id_date_end').val()
                    },
                    function (data) {
                        if (data.status) {
                            // console.log(data.data);
                            chart = Highcharts.chart('container', {
                                chart: {
                                    zoomType: 'x'
                                },
                                title: {
                                    text: 'Si, Fe, Mg'
                                },
                                xAxis: {
                                    gridLineWidth: 1,
                                    type: 'datetime',
                                    dateTimeLabelFormats: {
                                        hour: '%H:%M',
                                        day: '%e. %b'
                                    },
                                    labels: {
                                        step: 1,
                                        formatter: function () {
                                            return Highcharts.dateFormat('%Y/%m/%d', this.value);
                                        }

                                    },
                                },  //x
                                yAxis: [
                                    { // left y axis 0: Si
                                        title: {
                                            text: null
                                        },
                                        labels: {
                                            align: 'left',
                                            formatter: function () {
                                                return this.value / 1;
                                            }
                                        },
                                    },
                                    { // left y axis 1: Fe
                                        title: {
                                            text: null
                                        },
                                        labels: {
                                            align: 'left',
                                            formatter: function () {
                                                return this.value / 1;
                                            }
                                        },
                                    },
                                    { // left y axis 2: Mg
                                        title: {
                                            text: null
                                        },
                                        labels: {
                                            align: 'left',
                                            formatter: function () {
                                                return this.value / 1;
                                            }
                                        },
                                    }],  //y
                                tooltip: {
                                    formatter: function () {
                                        let s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M %a', this.x) + '</b>';
                                        $.each(this.points, function () {
                                            if (this.series.name === 'Fe')
                                                s += '<br/>' + this.series.name + ': ' +
                                                    this.y / 1000;
                                            else if (this.series.name === 'Si')
                                                s += '<br/>' + this.series.name + ': ' +
                                                    this.y / 10;
                                            else
                                                s += '<br/>' + this.series.name + ': ' +
                                                    this.y / 100;
                                        });
                                        return s;
                                    },
                                    shared: true
                                },
                                series: data.data
                            });
                        }
                    }  // if

                );
            });
            //
        });

        // 初始化日期
        let dt = moment().format('YYYY-MM-DD');
        $('#id_date_end').val(dt);
        let dt2 = moment().subtract(1, 'months').format('YYYY-MM-DD');
        $('#id_date_start').val(dt2);
    </script>
{% endblock %}